import React from 'react';
import '../style.less';
import { Button, Col, Form, Input, Row, Table } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import { commonPageSizeOptions, showTotalInfo } from '@/common/constVariable';

interface IUpdateNeedMaterialModalRightAPI {
  selectedRowKeys: any[];
  getMaterialRun: (res: Record<string, any>, type?: string | null) => void;
  getMaterialTableColumns: Record<string, any>[];
  getMaterialLoading: boolean;
  dataSource: Record<string, any>[];
  rowSelection: any;
  prefixCls: string;
  getMaterialTableProps: Record<string, any>;
}

export const UpdateNeedMaterialModalRight: React.FC<IUpdateNeedMaterialModalRightAPI> = ({
  selectedRowKeys,
  getMaterialRun,
  getMaterialLoading,
  dataSource,
  rowSelection,
  getMaterialTableColumns,
  prefixCls,
  getMaterialTableProps,
}) => {
  /** 表单对象 */
  const [form] = Form.useForm();

  /**表格分页方法*/
  const handlePaginationChange = (page: number, pageSize: number) => {
    getMaterialRun({ current: page, pageSize });
  };

  const {
    pagination: { current, pageSize, total },
  } = getMaterialTableProps;

  return (
    <div className={prefixCls + 'oneModal-oneModalBox-FormTable'}>
      <div style={{ padding: '9px 0' }}>
        <Form form={form}>
          <Row>
            <Col span={4}>
              <Form.Item name={'fullName'}>
                <Input placeholder="物料名称" allowClear />
              </Form.Item>
            </Col>
            <Col
              span={4}
              style={{
                paddingLeft: '8px',
              }}
            >
              <Form.Item name={'paramsInfo'}>
                <Input placeholder="物料简介" allowClear />
              </Form.Item>
            </Col>
            <Col
              span={4}
              style={{
                paddingLeft: '8px',
              }}
            >
              <Form.Item name={'specInfo'}>
                <Input placeholder="规格要求（参数）" allowClear />
              </Form.Item>
            </Col>
            <Col
              span={4}
              style={{
                paddingLeft: '8px',
              }}
            >
              <Form.Item name={'modelNum'}>
                <Input placeholder="规格型号" allowClear />
              </Form.Item>
            </Col>
            <Col
              span={8}
              style={{
                display: 'flex',
                justifyContent: 'flex-end',
              }}
            >
              <Form.Item>
                <Button
                  type={'default'}
                  icon={<ReloadOutlined />}
                  onClick={() => {
                    form.resetFields();
                    getMaterialRun({}, 'reset');
                  }}
                  onMouseOut={(event: any) => {
                    event?.target?.nodeName == 'BUTTON' ? event?.target?.blur() : event.target.parentNode.blur();
                  }}
                  style={{
                    marginRight: 0,
                    float: 'right',
                  }}
                >
                  重置
                </Button>
                <Button
                  type={'primary'}
                  icon={<SearchOutlined />}
                  onClick={() => {
                    getMaterialRun(form.getFieldsValue());
                  }}
                  onMouseOut={(event: any) => {
                    event?.target?.nodeName == 'BUTTON' ? event?.target?.blur() : event.target.parentNode.blur();
                  }}
                  style={{ marginRight: '8px', float: 'right' }}
                >
                  查询
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </div>
      <div className={'list-table listTable-zIndexStyle'} style={{ overflow: 'hidden' }}>
        <Table
          size="small"
          bordered={true}
          style={{ margin: '0' }}
          scroll={{ x: 1300, y: 'auto' }}
          // rowClassName={setTableRowClassName}
          loading={getMaterialLoading}
          dataSource={dataSource}
          rowKey="materialIDS"
          rowSelection={rowSelection}
          columns={getMaterialTableColumns}
          pagination={{
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: commonPageSizeOptions,
            showTotal: (total: any, range: any) => {
              return (
                <>
                  <div
                    style={{
                      display: 'flex',
                      width: '100%',
                      justifyContent: 'space-between',
                    }}
                  >
                    <div>
                      <span>
                        已选择<strong style={{ color: 'red' }}> {selectedRowKeys?.length} </strong>条物料
                      </span>
                    </div>
                    <div>{showTotalInfo(total, range)}</div>
                  </div>
                </>
              );
            },
            onChange: handlePaginationChange as any,
            pageSize: pageSize,
            current: current,
            total: total,
            showTitle: false,
          }}
        />
      </div>
    </div>
  );
};
